<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
  <head>
    <title>文件上传</title>
    <meta name="decorator" content="default" />
    <script type="text/javascript" src="${ctxStatic}/ajaxfileupload/ajaxfileupload.js"></script>
  </head>

  <body>
  
    <div style="margin: 10px;">
      <input name="productId" id="productId" type="hidden" value="${productId}" />
      <input name="productFileName" id="productFileName" type="text" readonly="readonly" style="width:360px;margin-bottom:0px;"/>
      <input name="productFile" id="productFile" type="file" style="display:none" />
      <input id="fileSelect" class="btn btn-primary" type="button" value="选择文件" onclick="$('#productFile').click();" />
      <input id="fileUpload" class="btn" type="button" value="上传" />
      <input id="save" class="btn btn-primary" type="button" value="保存排序" onclick="updateSort();" style="float:right;"/>
    </div>
    
    <form id="fileListForm" method="post">
    <table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>图片名称</th>
				<th>图片地址</th>
				<th>排序号</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${proProductFileList}" var="proProductFile">
			<tr>
				<td>
					<input name="ids" id="ids" type="hidden" value="${proProductFile.id}" />
					${proProductFile.fileName}
				</td>
				<td>
					<img src=${fastdfs_file_url}${proProductFile.fileUrl} style="width:auto;height:80px;">
				</td>
				<td>
					<input name="sorts" type="text" value="${proProductFile.sort}" style="width:50px;margin:0;padding:0;text-align:center;">
				</td>
				<td>
					<a href="" onclick="deleteProductFile('${proProductFile.id}')">删除</a>
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	</form>
    
    <script type="text/javascript">
			$('#productFile').change(function() {  
				var fileValue = document.getElementById("productFile").files; 
				$('#productFileName').val(fileValue[0].name);  
			});  
    
	      $("#fileUpload").click(function() {
	      	if($("#productFileName").val()==""){
				top.$.jBox.tip('请选择上传文件！','warning');
				return;
			}	
	      	loading('正在上传文件，请稍等...');
	        $.ajaxFileUpload({
	          url : '${ctx}/product/product/proProduct/saveProductFile',//处理图片脚本
	          secureuri : false,
	          data:{
	        	  productId : $("#productId").val()
	        	  },
	          type:"post",
	          fileElementId : 'productFile',//file控件id
	          dataType : "json",
			  success: function(data){
				if(data.success){
					top.$.jBox.tip('上传文件成功！','info');
					location.reload(); 
				}else{
					top.$.jBox.tip('上传文件失败！','warning');
				}},
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    top.$.jBox.tip('上传文件失败！','warning');
                }
	          })
	       });
	      
	      function deleteProductFile(productFileId){
	    	  var r=confirm("确认要删除该文件吗？")
	    	  if (r==true)
	    	    {
	    		  $.getJSON("${ctx}/product/product/proProduct/deleteProductFile?productFileId="+productFileId,{},function(data){
						if(data.success){
							top.$.jBox.tip('删除文件成功！','info');
							location.reload(); 
						}else{
							top.$.jBox.tip('删除文件失败！','warning');
						}
					});
	    	    }
	    	  }
	      
	      function updateSort() {
				loading('正在提交，请稍等...');
				$.ajax({
	                cache: true,
	                type: "POST",
	                url:'${ctx}/product/product/proProduct/updateSort',
	                data:$('#fileListForm').serialize(),// 你的formid
	                async: false,
	                success: function(data) {
	                	top.$.jBox.tip('保存排序成功！','info');
						location.reload(); 
	                },
	                error: function(request) {
						top.$.jBox.tip('保存排序失败！','warning');
	                }
	            });
	    	}
	</script>
	</body>

	</html>
